<template>
  <div class="user-profile-container">
    <!-- 头部信息 -->
    <div class="profile-header">
      <div class="avatar-section">
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="handleAvatarChange"
        >
          <el-avatar
            :size="100"
            :src="
              userData.aveter ||
              'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
            "
            class="avatar-shadow"
          />
          <div class="avatar-edit-hint">
            <el-icon><Edit /></el-icon>
          </div>
        </el-upload>
      </div>
      <div class="basic-info">
        <div class="name-edit">
          <h1 v-if="!editingName">{{ userData.name || "未填写姓名" }}</h1>
          <el-input
            v-else
            v-model="editName"
            size="small"
            @blur="saveName"
            @keyup.enter="saveName"
          />
          <el-button
            type="text"
            :icon="editingName ? '' : Edit"
            @click="toggleNameEdit"
            class="edit-btn"
          >
            {{ editingName ? "取消" : "编辑" }}
          </el-button>
        </div>
        <div class="meta-info">
          <span class="meta-tag sex-tag">{{ formatSex(userData.sex) }}</span>
          <span class="meta-tag edu-tag">{{
            formatEducation(userData.education)
          }}</span>
          <span class="meta-tag status-tag">{{
            formatCurrentStatus(userData.current_status)
          }}</span>
        </div>
        <div class="action-buttons">
          <el-button
            type="primary"
            size="small"
            class="action-btn"
            @click="handleContact"
          >
            <el-icon><Message /></el-icon>
            <span>立即沟通</span>
          </el-button>
          <el-button
            type="success"
            size="small"
            class="action-btn"
            @click="handleCall"
          >
            <el-icon><Phone /></el-icon>
            <span>电话联系</span>
          </el-button>
          <el-button
            type="danger"
            size="small"
            class="action-btn"
            @click="confirmDeleteAccount"
          >
            <el-icon><Delete /></el-icon>
            <span>删除账号</span>
          </el-button>
        </div>
      </div>
    </div>

    <div class="divider"></div>

    <!-- 个人信息 -->
    <el-card class="profile-section info-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><User /></el-icon>
          <span>个人信息</span>
          <el-button
            type="text"
            class="edit-section-btn"
            @click="showEditDialog('basic')"
          >
            <el-icon><Edit /></el-icon> 编辑
          </el-button>
        </div>
      </template>
      <div class="info-table">
        <div class="info-row">
          <span class="info-label"
            ><el-icon><Calendar /></el-icon> 年龄</span
          >
          <span class="info-value"
            >{{ calculateAge(userData.birthdate) || "未填写" }}岁</span
          >
        </div>
        <div class="info-row">
          <span class="info-label"
            ><el-icon><School /></el-icon> 学历</span
          >
          <span class="info-value">{{
            formatEducation(userData.education)
          }}</span>
        </div>
        <div class="info-row">
          <span class="info-label"
            ><el-icon><Briefcase /></el-icon> 求职状态</span
          >
          <span class="info-value">{{
            formatCurrentStatus(userData.current_status)
          }}</span>
        </div>
      </div>
    </el-card>

    <!-- 个人简介 -->
    <el-card class="profile-section" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><Notebook /></el-icon>
          <span>个人简介</span>
          <el-button
            type="text"
            class="edit-section-btn"
            @click="showEditDialog('description')"
          >
            <el-icon><Edit /></el-icon> 编辑
          </el-button>
        </div>
      </template>
      <div class="description-content">
        <p v-if="userData.description">{{ userData.description }}</p>
        <el-empty v-else description="暂无个人简介" :image-size="60" />
      </div>
    </el-card>

    <!-- 工作经历 -->
    <el-card class="profile-section" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><OfficeBuilding /></el-icon>
          <span>工作经历</span>
          <div class="work-exp-actions">
            <el-button
              type="primary"
              size="small"
              @click="showAddExperienceDialog"
            >
              <el-icon><Plus /></el-icon> 添加经历
            </el-button>
          </div>
        </div>
      </template>

      <div class="work-experience-list">
        <div
          v-for="(exp, index) in userData.work_experiences"
          :key="index"
          class="work-experience-item"
        >
          <div class="experience-header">
            <h3>
              <el-icon><Location /></el-icon>
              {{ exp.company || "未填写公司名称" }}
            </h3>
            <div class="position">
              <el-icon><Postcard /></el-icon> {{ exp.position || "未填写职位" }}
            </div>
          </div>
          <div class="experience-content">
            <p>{{ exp.description || "暂无工作描述" }}</p>
          </div>
          <div class="experience-duration">
            <el-icon><Clock /></el-icon> {{ formatDate(exp.start_date) }} -
            {{ exp.end_date ? formatDate(exp.end_date) : "至今" }}
          </div>
          <div class="experience-actions">
            <el-button
              type="primary"
              size="small"
              plain
              @click="showEditExperienceDialog(exp)"
            >
              <el-icon><Edit /></el-icon> 编辑
            </el-button>
            <el-button
              type="danger"
              size="small"
              plain
              @click="confirmDeleteExperience(exp.id)"
            >
              <el-icon><Delete /></el-icon> 删除
            </el-button>
          </div>
        </div>

        <div
          v-if="
            !userData.work_experiences || userData.work_experiences.length === 0
          "
          class="empty-work"
        >
          <el-empty description="暂无工作经历" :image-size="80" />
        </div>
      </div>
    </el-card>

    <!-- 编辑基本信息对话框 -->
    <el-dialog
      v-model="editBasicDialogVisible"
      title="编辑基本信息"
      width="600px"
    >
      <el-form :model="editBasicForm" label-width="100px">
        <el-form-item label="性别">
          <el-radio-group v-model="editBasicForm.sex">
            <el-radio :label="1">女</el-radio>
            <el-radio :label="2">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="editBasicForm.birthdate"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="学历">
          <el-select v-model="editBasicForm.education" placeholder="请选择学历">
            <el-option
              v-for="item in educationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="求职状态">
          <el-select
            v-model="editBasicForm.current_status"
            placeholder="请选择求职状态"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editBasicDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveBasicInfo">保存</el-button>
      </template>
    </el-dialog>

    <!-- 编辑个人简介对话框 -->
    <el-dialog
      v-model="editDescDialogVisible"
      title="编辑个人简介"
      width="600px"
    >
      <el-input
        v-model="editDescForm.description"
        type="textarea"
        :rows="8"
        placeholder="请输入个人简介"
      />
      <template #footer>
        <el-button @click="editDescDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveDescription">保存</el-button>
      </template>
    </el-dialog>

    <!-- 添加/编辑工作经历对话框 -->
    <el-dialog
      v-model="experienceDialogVisible"
      :title="experienceDialogTitle"
      width="700px"
    >
      <el-form :model="experienceForm" label-width="100px">
        <el-form-item label="公司名称" required>
          <el-input
            v-model="experienceForm.company"
            placeholder="请输入公司名称"
          />
        </el-form-item>
        <el-form-item label="职位名称" required>
          <el-input
            v-model="experienceForm.position"
            placeholder="请输入职位名称"
          />
        </el-form-item>
        <el-form-item label="工作时间" required>
          <div class="date-range-picker">
            <el-date-picker
              v-model="experienceForm.start_date"
              type="month"
              placeholder="开始时间"
              value-format="YYYY-MM"
              style="width: 48%; margin-right: 4%"
            />
            <el-date-picker
              v-model="experienceForm.end_date"
              type="month"
              placeholder="结束时间"
              value-format="YYYY-MM"
              style="width: 48%"
              :disabled="experienceForm.is_current"
            />
            <el-checkbox
              v-model="experienceForm.is_current"
              style="margin-top: 10px"
            >
              至今在此工作
            </el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="行业">
          <el-select v-model="experienceForm.industry" placeholder="请选择行业">
            <el-option
              v-for="item in industryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="薪资范围">
          <el-input
            v-model="experienceForm.salary_range"
            placeholder="例如: 15k-20k"
          />
        </el-form-item>
        <el-form-item label="工作描述">
          <el-input
            v-model="experienceForm.description"
            type="textarea"
            :rows="4"
            placeholder="详细描述你的工作内容和成就"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="experienceDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveWorkExperience">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  User,
  Calendar,
  School,
  Briefcase,
  Notebook,
  OfficeBuilding,
  Message,
  Phone,
  Location,
  Postcard,
  Clock,
  Edit,
  Delete,
  Plus,
} from "@element-plus/icons-vue";

const userData = ref({});
const userId = localStorage.getItem("userid");

// 编辑状态
const editingName = ref(false);
const editName = ref("");

// 对话框控制
const editBasicDialogVisible = ref(false);
const editDescDialogVisible = ref(false);
const experienceDialogVisible = ref(false);

// 表单数据
const editBasicForm = ref({
  sex: null,
  birthdate: "",
  education: null,
  current_status: null,
});

const editDescForm = ref({
  description: "",
});

const experienceForm = ref({
  id: null,
  company: "",
  position: "",
  start_date: "",
  end_date: "",
  description: "",
  salary_range: "",
  industry: null,
  is_current: false,
});

// 计算属性
const experienceDialogTitle = computed(() => {
  return experienceForm.value.id ? "编辑工作经历" : "添加工作经历";
});

// 选项数据
const educationOptions = [
  { value: 1, label: "初中以下" },
  { value: 2, label: "初中" },
  { value: 3, label: "中专" },
  { value: 4, label: "高中" },
  { value: 5, label: "大专" },
  { value: 6, label: "本科" },
  { value: 7, label: "硕士" },
  { value: 8, label: "博士及以上" },
];

const statusOptions = [
  { value: 1, label: "在职看机会" },
  { value: 2, label: "离职" },
  { value: 3, label: "在校生等" },
  { value: 4, label: "兼职" },
];

const industryOptions = [
  { value: 1, label: "互联网" },
  { value: 2, label: "金融" },
  { value: 3, label: "教育" },
  { value: 4, label: "医疗健康" },
  { value: 5, label: "房地产" },
  { value: 6, label: "制造业" },
  { value: 7, label: "消费品" },
  { value: 8, label: "物流运输" },
  { value: 9, label: "文化传媒" },
  { value: 10, label: "其他" },
];

// 方法
const fetchUserData = async () => {
  try {
    const response = await axios.post("http://127.0.0.1:8000/user/UserInfo/", {
      userid: userId,
    });

    if (response.data && response.data.code === 200) {
      userData.value = response.data.data || {};
      // 初始化编辑表单数据
      editBasicForm.value = {
        sex: userData.value.sex,
        birthdate: userData.value.birthdate,
        education: userData.value.education,
        current_status: userData.value.current_status,
      };
      editDescForm.value.description = userData.value.description || "";
    } else {
      ElMessage.error("获取用户数据失败");
    }
  } catch (error) {
    console.error("获取用户数据失败:", error);
    ElMessage.error("获取用户数据失败");
  }
};

const showAddExperienceDialog = () => {
  experienceForm.value = {
    id: null,
    company: "",
    position: "",
    start_date: "",
    end_date: "",
    description: "",
    salary_range: "",
    industry: null,
    is_current: false,
  };
  experienceDialogVisible.value = true;
};

const saveWorkExperience = async () => {
  if (
    !experienceForm.value.company ||
    !experienceForm.value.position ||
    !experienceForm.value.start_date
  ) {
    ElMessage.warning("请填写必填字段");
    return;
  }

  // 转换日期格式：从 YYYY-MM 转换为 YYYY-MM-DD
  const formatDateForBackend = (dateString) => {
    if (!dateString) return null;
    // 如果已经是完整日期格式，直接返回
    if (dateString.includes("-") && dateString.split("-").length === 3) {
      return dateString;
    }
    // 否则添加 '-01' 作为日部分
    return dateString + "-01";
  };

  const isEdit = !!experienceForm.value.id; // 判断是编辑还是添加

  try {
    let response;
    let successMessage;

    if (isEdit) {
      // 编辑现有工作经历
      const payload = {
        id: experienceForm.value.id,
        company: experienceForm.value.company,
        position: experienceForm.value.position,
        start_date: formatDateForBackend(experienceForm.value.start_date),
        end_date: experienceForm.value.is_current
          ? null
          : formatDateForBackend(experienceForm.value.end_date),
        description: experienceForm.value.description,
        salary_range: experienceForm.value.salary_range,
        industry: experienceForm.value.industry,
        is_current: experienceForm.value.is_current,
      };

      console.log("Editing work experience:", payload); // 调试用
      response = await axios.post(
        "http://127.0.0.1:8000/user/workexperience/",
        payload
      );
      successMessage = "工作经历更新成功";
    } else {
      // 添加新工作经历
      const payload = {
        job_info_id: userData.value.id,
        work_experience: {
          company: experienceForm.value.company,
          position: experienceForm.value.position,
          start_date: formatDateForBackend(experienceForm.value.start_date),
          end_date: experienceForm.value.is_current
            ? null
            : formatDateForBackend(experienceForm.value.end_date),
          description: experienceForm.value.description,
          salary_range: experienceForm.value.salary_range,
          industry: experienceForm.value.industry,
          is_current: experienceForm.value.is_current,
        },
      };

      console.log("Adding new work experience:", payload); // 调试用
      response = await axios.post(
        "http://127.0.0.1:8000/user/add-work-experience/",
        payload
      );
      successMessage = "工作经历添加成功";
    }

    if (response.data && response.data.code === 200) {
      ElMessage.success(successMessage);
      await fetchUserData();
      experienceDialogVisible.value = false;
    } else {
      const errorMsg =
        response.data.message ||
        (isEdit ? "工作经历更新失败" : "工作经历添加失败");
      ElMessage.error(
        `${errorMsg}: ${JSON.stringify(response.data.errors || "")}`
      );
    }
  } catch (error) {
    console.error(isEdit ? "更新工作经历失败:" : "添加工作经历失败:", error);
    const errorMsg =
      error.response?.data?.message ||
      (isEdit ? "工作经历更新失败" : "工作经历添加失败");
    ElMessage.error(
      `${errorMsg}: ${JSON.stringify(
        error.response?.data?.errors || error.message
      )}`
    );
  }
};
// 其他方法保持不变...
const toggleNameEdit = () => {
  editingName.value = !editingName.value;
  if (editingName.value) {
    editName.value = userData.value.name || "";
  }
};

const saveName = async () => {
  if (!editName.value.trim()) {
    ElMessage.warning("姓名不能为空");
    return;
  }

  try {
    const response = await axios.post("http://127.0.0.1:8000/user/jobinfo/", {
      userid: userId,
      name: editName.value,
    });

    if (response.data && response.data.code === 200) {
      ElMessage.success("姓名更新成功");
      userData.value.name = editName.value;
      editingName.value = false;
    } else {
      ElMessage.error("姓名更新失败");
    }
  } catch (error) {
    console.error("更新姓名失败:", error);
    ElMessage.error("姓名更新失败");
  }
};

const showEditDialog = (type) => {
  if (type === "basic") {
    editBasicDialogVisible.value = true;
  } else if (type === "description") {
    editDescDialogVisible.value = true;
  }
};

const saveBasicInfo = async () => {
  try {
    const response = await axios.post("http://127.0.0.1:8000/user/jobinfo/", {
      userid: userId,
      ...editBasicForm.value,
    });

    if (response.data && response.data.code === 200) {
      ElMessage.success("基本信息更新成功");
      Object.assign(userData.value, editBasicForm.value);
      editBasicDialogVisible.value = false;
    } else {
      ElMessage.error("基本信息更新失败");
    }
  } catch (error) {
    console.error("更新基本信息失败:", error);
    ElMessage.error("基本信息更新失败");
  }
};

const saveDescription = async () => {
  try {
    const response = await axios.post("http://127.0.0.1:8000/user/jobinfo/", {
      userid: userId,
      description: editDescForm.value.description,
    });

    if (response.data && response.data.code === 200) {
      ElMessage.success("个人简介更新成功");
      userData.value.description = editDescForm.value.description;
      editDescDialogVisible.value = false;
    } else {
      ElMessage.error("个人简介更新失败");
    }
  } catch (error) {
    console.error("更新个人简介失败:", error);
    ElMessage.error("个人简介更新失败");
  }
};

const showEditExperienceDialog = (experience) => {
  experienceForm.value = {
    id: experience.id,
    company: experience.company,
    position: experience.position,
    start_date: experience.start_date,
    end_date: experience.end_date,
    description: experience.description,
    salary_range: experience.salary_range,
    industry: experience.industry,
    is_current: !experience.end_date,
  };
  experienceDialogVisible.value = true;
};

const confirmDeleteExperience = (experienceId) => {
  ElMessageBox.confirm("确定要删除这条工作经历吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      try {
        const response = await axios.delete(
          "http://127.0.0.1:8000/user/workexperience/",
          {
            data: { id: experienceId },
          }
        );

        if (response.data && response.data.code === 200) {
          ElMessage.success("工作经历删除成功");
          await fetchUserData(); // 刷新数据
        } else {
          ElMessage.error("工作经历删除失败");
        }
      } catch (error) {
        console.error("删除工作经历失败:", error);
        ElMessage.error("工作经历删除失败");
      }
    })
    .catch(() => {});
};

const confirmDeleteAccount = () => {
  ElMessageBox.confirm("确定要删除您的账号吗? 此操作不可恢复!", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "error",
  })
    .then(async () => {
      try {
        const response = await axios.delete(
          "http://127.0.0.1:8000/user/jobinfo/",
          {
            data: { userid: userId },
          }
        );

        if (response.data && response.data.code === 200) {
          ElMessage.success("账号删除成功");
          // 这里可以添加重定向到登录页或其他操作
        } else {
          ElMessage.error("账号删除失败");
        }
      } catch (error) {
        console.error("删除账号失败:", error);
        ElMessage.error("账号删除失败");
      }
    })
    .catch(() => {});
};

const handleAvatarChange = (file) => {
  const isImage = file.raw.type.startsWith("image/");
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    ElMessage.error("只能上传图片文件!");
    return false;
  }
  if (!isLt2M) {
    ElMessage.error("图片大小不能超过 2MB!");
    return false;
  }

  const formData = new FormData();
  formData.append("avatar", file.raw);
  formData.append("userid", userId); // 确保userId已定义

  axios
    .post("http://127.0.0.1:8000/user/upload-avatar/", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    })
    .then((response) => {
      if (response.data && response.data.code === 200) {
        ElMessage.success("头像更新成功");
        userData.value.aveter = response.data.data.avatar_url;
      } else {
        ElMessage.error(response.data.message || "头像更新失败");
      }
    })
    .catch((error) => {
      console.error("上传头像失败:", error);
      ElMessage.error(error.response?.data?.message || "上传头像失败");
    });

  return false;
};

const calculateAge = (birthdate) => {
  if (!birthdate) return null;
  const birthDate = new Date(birthdate);
  const today = new Date();
  let age = today.getFullYear() - birthDate.getFullYear();
  const monthDiff = today.getMonth() - birthDate.getMonth();

  if (
    monthDiff < 0 ||
    (monthDiff === 0 && today.getDate() < birthDate.getDate())
  ) {
    age--;
  }
  return age;
};

const handleContact = () => {
  ElMessage.success("已发送沟通请求");
};

const handleCall = () => {
  ElMessage.info("正在准备电话联系...");
};

const formatSex = (sex) => {
  return sex === 1 ? "女" : sex === 2 ? "男" : "未设置";
};

const formatEducation = (education) => {
  const educationMap = {
    1: "初中以下",
    2: "初中",
    3: "中专",
    4: "高中",
    5: "大专",
    6: "本科",
    7: "硕士",
    8: "博士及以上",
  };
  return educationMap[education] || "未填写";
};

const formatCurrentStatus = (status) => {
  const statusMap = {
    1: "在职-考虑机会",
    2: "离职",
    3: "在校生等",
    4: "兼职",
  };
  return statusMap[status] || "未设置";
};

const formatDate = (dateString) => {
  if (!dateString) return "未填写";
  if (dateString.includes("-")) {
    const [year, month] = dateString.split("-");
    return `${year}.${month.padStart(2, "0")}`;
  }
  return dateString;
};

onMounted(() => {
  fetchUserData();
});
</script>
<style scoped lang="scss">
.user-profile-container {
  max-width: 800px;
  margin: 0 auto;
  margin-top: 40px;
  padding: 30px;
  font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei",
    sans-serif;
  color: #333;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 10px;
}

.avatar-section {
  margin-right: 30px;
  position: relative;

  .avatar-shadow {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;

    &:hover {
      transform: scale(1.05);
    }
  }
}

.profile-header h1 {
  margin: 0 0 12px 0;
  font-size: 28px;
  font-weight: 600;
  color: #2c3e50;
}

.meta-info {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;

  .meta-tag {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;

    &.sex-tag {
      background-color: #f0f7ff;
      color: #409eff;
      border: 1px solid #d9ecff;
    }

    &.edu-tag {
      background-color: #f0f9eb;
      color: #67c23a;
      border: 1px solid #e1f3d8;
    }

    &.status-tag {
      background-color: #fdf6ec;
      color: #e6a23c;
      border: 1px solid #faecd8;
    }
  }
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-top: 25px;

  .action-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #e0e0e0, transparent);
  margin: 25px 0;
}

.profile-section {
  margin-bottom: 25px;
  border-radius: 8px;
  border: none;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
  }

  :deep(.el-card__header) {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    background-color: #f9fafc;
  }

  :deep(.el-card__body) {
    padding: 20px;
  }
}

.card-header {
  font-size: 17px;
  font-weight: 600;
  color: #444;
  display: flex;
  align-items: center;

  .header-icon {
    margin-right: 8px;
    color: #409eff;
    font-size: 18px;
  }
}

.info-card {
  margin-bottom: 30px;
}

.info-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 25px;
}

.info-row {
  display: flex;
  align-items: center;

  .info-label {
    color: #666;
    width: 100px;
    font-size: 14px;
    display: flex;
    align-items: center;

    .el-icon {
      margin-right: 6px;
      font-size: 16px;
      color: #909399;
    }
  }

  .info-value {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }
}

.description-content {
  line-height: 1.8;
  color: #555;
  font-size: 14px;

  p {
    margin: 0;
  }
}

.work-experience-list {
  .work-experience-item {
    padding: 18px 0;
    border-bottom: 1px dashed #e8e8e8;

    &:last-child {
      border-bottom: none;
    }
  }

  .experience-header {
    margin-bottom: 10px;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #2c3e50;
      display: flex;
      align-items: center;

      .el-icon {
        margin-right: 8px;
        color: #409eff;
      }
    }

    .position {
      font-size: 14px;
      color: #666;
      margin-top: 6px;
      font-weight: 500;
      display: flex;
      align-items: center;

      .el-icon {
        margin-right: 8px;
        color: #67c23a;
      }
    }
  }

  .experience-content {
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    padding-left: 24px;
  }

  .experience-duration {
    font-size: 13px;
    color: #999;
    display: flex;
    align-items: center;

    .el-icon {
      margin-right: 6px;
    }
  }
}

.empty-work {
  padding: 40px 0;
}

@media (max-width: 768px) {
  .user-profile-container {
    padding: 20px 15px;
  }

  .profile-header {
    flex-direction: column;
    text-align: center;

    .avatar-section {
      margin-right: 0;
      margin-bottom: 20px;
    }
  }

  .action-buttons {
    justify-content: center;
  }

  .info-table {
    grid-template-columns: 1fr;
  }
}
/* 新增样式 */
.name-edit {
  display: flex;
  align-items: center;
  gap: 10px;

  h1 {
    margin: 0;
  }

  .edit-btn {
    padding: 0;
    height: auto;
  }
}

.edit-section-btn {
  margin-left: auto;
  font-size: 14px;
}

.work-exp-actions {
  margin-left: auto;
}

.experience-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

.avatar-uploader {
  position: relative;
  display: inline-block;

  .avatar-edit-hint {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
  }

  &:hover .avatar-edit-hint {
    opacity: 1;
  }
}

.date-range-picker {
  display: flex;
  flex-wrap: wrap;
}

.upload-demo {
  text-align: center;
}
</style>
